<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .songitem {
            height: 40px;
        }

        .songitem.active {
            font-size: 20px;
            font-weight: bold;
            color: orangered;
        }
    </style>
</head>

<body>
    <h1 id="time">
        00:00
    </h1>
    <h1 id="text" style="float:left;width:500px;"></h1>
    <div id="song1" style="float:left;width:400px;height:500px;border:1px solid red"></div>
    <div style="float:right;width:400px;height:300px;border:1px solid red;overflow: hidden;">
        <div class="container" id="song2">

        </div>
    </div>
    <script>
        var str =
            `
        [00:00]作曲: 赵雷
        [00:03]作词: 赵雷
        [00:44]她是个三十岁 至今还没有结婚的女人
        [00:52]她笑脸中眼旁已有几道波纹
        [01:02]三十岁了光芒和激情已被岁月打磨
        [01:10]是不是一个人的生活 比两个人更快活
        [01:18]我喜欢 三十岁女人特有的温柔
        [01:27]我知道 深夜里的寂寞难以忍受
        [01:35]你说工作中忙的太久
        [01:39]不觉间已三十个年头
        [01:45]挑剔着 轮换着 你再三选择
        `
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>

        var str ="   Si   mba  ↵ "
        console.log(str.replace(/[\\x20\\t\\r\\n\\f↵]/g,""))


        var time = 105

        function formattime(val) {
            if (val < 60) {
                return "00:" + buling(val)
            } else {
                var fen = Math.floor(val / 60)
                var sec = val % 60
                return buling(fen) + ":" + buling(sec)
            }
        }

        var buling = function (val) {
            return val >= 10 ? val : ("0" + val)
        }

        var t = 0
        var timer = setInterval(() => {
            t++
            if (t > time) clearInterval(timer)
            else {
                $("#time").text(formattime(t))
                setgeci()
                setgeci1gaoliang()
                setgecigundong()
            }
        }, 1000)


        function setgeci() {
            //显示对应的歌词
            if (obj[formattime(t)])
                $("#text").text(obj[formattime(t)])
        }

        var i = 0

        function setgecigundong() {
            if (obj[formattime(t)]) {
                i++
                $(`#song2`).css({
                    "transform": `translateY(-${40*i}px)`,
                    "transition": "0.5s"
                })

            }
        }

        function setgeci1gaoliang() {
            $(`.songitem[data-time="${ $.trim($("#time").text())}"]`).addClass("active").siblings().removeClass(
                "active")
        }


        function setgeci1() {
            for (const key in obj) {
                $("#song1").append(`<div data-time="${key}" class="songitem">${obj[key]}</div>`)
                $("#song2").append(`<div data-time="${key}" class="songitem">${obj[key]}</div>`)
            }
        }


        var arr = str.split(/\[\w{2}:\w{2}\]/).map(r => {
            return $.trim(r)
        }).filter(r => r.length > 0)

        var timearr = str.match(/\[\w{2}:\w{2}\]/g)

        var obj = {}
        arr.forEach((item, i) => {
            obj[timearr[i].replace('[', '').replace(']', "")] = item
        })

        // console.log(obj)
        setgeci()
        setgeci1()
        setgeci1gaoliang()
    </script>

</body>

</html>